<template>
  <div class="app-container">
    <div class="">
      <!-- 查询 -->
      <div class="filter-container">

        <el-form :inline="true" class="search-form" label-width="90px">
          <el-row style="display: flex;flex-wrap: wrap;">
            <el-col :span="18">
              <el-form-item v-if="searchDisplay" label="分组" style="margin: 5px 0 ;">
                <el-select v-model="searchForm.group_id" clearable placeholder="请选择分组">
                  <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
              <el-form-item v-if="searchDisplay" label="性别" style="margin: 5px 0 ;">
                <el-select v-model="searchForm.gender" clearable placeholder="请选择性别">
                  <el-option
                    v-for="item in [{ name: '男', id: 1, }, { name: '女', id: 0, }, { name: '保密', id: 0, }]"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item v-if="searchDisplay" label="等级" style="margin: 5px 0 ;">
                <el-select v-model="searchForm.level_id" clearable placeholder="请选择等级">
                  <el-option v-for="item in gradeList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
              <el-form-item v-if="searchDisplay" label="是否认证" style="margin: 5px 0 ;">
                <el-select v-model="searchForm.is_real_name" clearable placeholder="请选择认证状态">
                  <el-option
                    v-for="item in [{ name: '已认证', id: 1, }, { name: '未认证', id: 2, }]"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item v-if="searchDisplay" label="是否消费" style="margin: 5px 0 ;">
                <el-select v-model="searchForm.is_consume" clearable placeholder="请选择是否消费">
                  <el-option
                    v-for="item in [{ name: '已消费', id: 1, }, { name: '未消费', id: 2, }]"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item v-if="searchDisplay" label="用户身份" style="margin: 5px 0 ;">
                <el-select v-model="searchForm.identity_type" clearable placeholder="请选择用户身份">
                  <el-option
                    v-for="item in [{ name: '普通用户', id: 1, }, { name: '推广员', id: 2, }]"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item v-if="searchDisplay" label="用户状态" style="margin: 5px 0 ;">
                <el-select v-model="searchForm.status" clearable placeholder="请选择用户状态">
                  <el-option
                    v-for="item in [{ name: '已启用', id: 1, }, { name: '已冻结', id: 0, }]"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item v-if="searchDisplay" label="是否新用户" style="margin: 5px 0 ;">
                <el-select v-model="searchForm.is_new_user" clearable placeholder="请选择是否新用户">
                  <el-option
                    v-for="item in [{ name: '新用户', id: 1, }, { name: '老用户', id: 2, }]"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="搜索" style="margin: 5px 0 ;">
                <el-input
                  v-model="searchForm.search_name"
                  clearable
                  placeholder="请输入内容"
                  onkeyup="value =value.replace(/[^a-zA-Z0-9\u4e00-\u9fa5]/g, '')"
                  class="input-with-select"
                >
                  <el-select slot="prepend" v-model="searchForm.search_type" placeholder="类型">
                    <el-option label="全部" :value="1" />
                    <el-option label="用户ID" :value="2" />
                    <el-option label="手机号" :value="3" />
                    <el-option label="昵称" :value="4" />
                  </el-select>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" style="margin: 5px 0; text-align: right;">
              <el-form-item>
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-search"
                  @click="getListWay"
                >查询</el-button>
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-refresh"
                  @click="resetting"
                >重置</el-button>
                <el-button
                  v-if="!searchDisplay"
                  type="warning"
                  icon="el-icon-caret-bottom"
                  @click="searchDisplay = true"
                >展开</el-button>
                <el-button
                  v-else
                  type="warning"
                  icon="el-icon-caret-top"
                  @click="searchDisplay = false"
                >收起</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="grouping" style="margin-top: 20px">
      <div class="marginBottom">
        <el-row :gutter="20">
          <el-col :span="4" style="float:right;">
            <div class="right-panel el-button-group">
              <el-button class="" icon="el-icon-refresh" size="mini" @click="refresh" />
              <el-dropdown trigger="click" :hide-on-click="false">
                <span class="el-dropdown-link">
                  <el-button class="" icon="el-icon-s-operation" size="mini" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                    <el-checkbox v-model="checkboxTableThead" :label="fruit">{{
                      tableTheadOptions[fruit].label
                    }}</el-checkbox>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="20">
        <el-col>
          <el-table
            ref="userMultipleSelectionTable"
            v-loading="loading"
            highlight-current-row
            :data="userList"
            :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }"
            style="width: 100%"
            :row-key="row=>row.id"
            @selection-change="handleSelectionChange"
          >
            <el-table-column align="center" type="selection" width="55" reserve-selection />
            <el-table-column align="center" prop="avatar" label="头像">
              <template slot-scope="scope">
                <div style="width: 40px;height: 40px;margin: 0 auto;">
                  <el-image
                    v-if="scope.row.avatar"
                    :src="scope.row.avatar"
                    :preview-src-list="[scope.row.avatar]"
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column
              v-for="fruit in tableThead"
              :key="fruit"
              :label="tableTheadOptions[fruit].label"
              min-width="80"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row[fruit] }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="is_new_user" label="是否新用户">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.is_new_user === 1" size="mini">是</el-tag>
                <el-tag v-else type="danger" size="mini">否</el-tag>
              </template>
            </el-table-column>

          </el-table></el-col>
      </el-row>
      <el-row style="text-align: right">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="searchForm.page"
          :limit.sync="searchForm.count"
          @pagination="getListWay"
        />
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  getUserList, addUser, getgradeList, getgroupList, getUserDetail, editBalance, editPoints, getTagCategoryAll, editUserDetail,
  getBalanceList, getVoucherList, getIntegralList, getInvitationList, getdeviceList, getRegionList, delPoints
} from '@/api/user/index'
import { QueryCouponList, AdminGrantCoupon } from '@/api/coupon/index'
import LogoUpload from '@/components/FileUpload'
const tableTheadOption = {
  id: {
    label: '用户id',
    field: 'id'
  },
  nickname: {
    label: '姓名',
    field: 'nickname'
  },
  mobile: {
    label: '手机号',
    field: 'mobile'
  },
  created_at: {
    label: '创建时间',
    field: 'created_at'
  }
}
const allTableThead = ['id', 'nickname', 'mobile', 'created_at']
const defaultTableThead = ['id', 'nickname', 'mobile','created_at']
export default {
  name: 'UserListComp',
  components: {
    LogoUpload
  },
  data() {
    return {
      // 默认表头
      tableTheadOptions: tableTheadOption,
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      // 为了保证table 每次都会重渲
      tableKey: 1,
      // 搜索选择等级
      gradeList: [],
      // 搜索选择分组
      groupList: [],
      // 搜索选择标签
      TagCategoryAll: [],
      // 用户列表加载框
      loading: false,
      // 用户列表
      userList: [],
      // 用户列表总条数
      total: 0,
      // 当前搜索是否展开
      searchDisplay: false,
      // 列表当前选中的数组
      multipleSelection: [],
      // 搜索参数
      searchForm: {
        search_type: 1,
        search_name: '',
        level_id: '',
        group_id: '',
        identity_type: '',
        is_pay: '',
        age: '',
        gender: '',
        is_real_name: '',
        is_consume: '',
        is_new_user: '',
        page: 1,
        count: 10
      },
      title: '添加',
      group_id: [],
      level_id: [],
      user_tag_id: [],
      // 省列表
      economizeList: [],
      // 市列表
      cityList: [],
      // 区列表
      countyList: [],
      isRedisplay: false,
      choosedUserList: []
    }
  },
  watch: {
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(i => valArr.indexOf(i) >= 0)
      this.tableKey = this.tableKey + 1
    }
  },
  mounted() {
    getgradeList().then((res) => {
      this.gradeList = res.data.list
    })
    getgroupList().then((res) => {
      this.groupList = res.data.list
    })
    getTagCategoryAll().then((res) => {
      this.TagCategoryAll = res.data
    })
    this.getRegionListWay()
    this.getListWay()
  },
  methods: {
    refresh() {
      this.getListWay()
    },
    getRegionListWay() {
      getRegionList().then((res) => {
        this.economizeList = res.data
      })
    },
    // 获取用户列表
    getListWay() {
      this.loading = true
      var obj = JSON.parse(JSON.stringify(this.searchForm))
      if (obj.user_tag_id instanceof Array) {
        obj.user_tag_id = obj.user_tag_id.join(',')
      }
      getUserList(obj).then((res) => {
        this.loading = false
        if (res.code !== 200) {
          this.$messages.error(res.msg)
          return
        }
        this.userList = res.data.list
        this.total = res.data.total
        if (this.isRedisplay) {
          this.doRedisplayUser()
        }
      })
    },
    resetting() {
      this.searchForm = {
        search_type: 1,
        search_name: '',
        level_id: '',
        group_id: '',
        identity_type: '',
        is_pay: '',
        age: '',
        gender: '',
        is_real_name: '',
        is_consume: '',
        is_new_user: '',
        page: 1,
        count: 10
      }
      this.getListWay()
    },
    // 切换用户类型重新获取用户列表
    customerTypeWay() {
      this.searchForm.page = 1
      this.searchForm.count = 10
      this.getListWay()
    },
    // 用户列表选择框选中
    handleSelectionChange(val) {
      console.log('选中状态再次执行...')
      this.multipleSelection = val
      this.$emit('userchoosechange', val)
    },
    // 分页选择调用
    handleSizeChange(val) {
      this.searchForm.count = val
      this.getListWay()
    },
    // 分页选择调用
    handleCurrentChange(val) {
      this.searchForm.page = val
      this.getListWay()
    },
    doRedisplayUser() {
      if (this.userList.length > 0) {
        this.choosedUserList.forEach(item => {
          const user = this.userList.find(user => String(user.id) === item.id)
          if (user) {
            this.multipleSelection.push(user)
          }
        })

        // 回显
        this.$nextTick(() => {
          this.multipleSelection.forEach(item => {
            this.$refs.userMultipleSelectionTable.toggleRowSelection(item, true)
          })
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
img {
    width: 100%;
    height: 100%;
}

.title {
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
}

.sn {
    color: #606266;
    font-size: 13px;
}

.order_center {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 50px 0 0;
    font-size: 13px;
    color: #666;
}

.infoDiv {
    display: flex;

    .img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: #000;
    }

    .right {
        flex: 1;
        margin-left: 20px;

        h3 {
            line-height: 30px;
            font-weight: 400;
            font-size: 16px;
            padding: 0px 0;
            margin: 0;
        }
    }
}

.infoDivTop {
    display: flex;

    .img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: #000;
    }

    .text {
        line-height: 80px;
        font-weight: 500;
        font-size: 16px;
        color: rgba(0, 0, 0, .85);
        margin-left: 20px;
    }

    .right {
        flex: 1;
        text-align: right;

    }
}
</style>
<style>
.input-with-select .el-select .el-input {
    width: 100px !important;
}
</style>
